<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<style>
	.fileinput-button {
		position: relative;
		display: inline-block;
		overflow: hidden;
	}

	.fileinput-button input{
		position:absolute;
		right: 0px;
		top: 0px;
		opacity: 0;
		-ms-filter: 'alpha(opacity=0)';
		font-size: 200px;
	}
</style>

<div class="container-div">
	<div class="row">
		<div class="col-sm-12 search-collapse">
			<form id="phoneform">
				<input type="hidden" id="excelName" th:value="${phone.flag}">

				<div class="select-list">
					<ul>
						<li>手机号码：<input type="text" name="phone" /></li>

						<li>
							<select class="form-control show-tick selectpicker" name="flag" data-live-search="true" multiple
									data-first-option="false" title='请选择标签' >
								<option th:each="flag : ${labels}" th:text="${flag.label}" th:value="${flag.label}"></option>
							</select>
						</li>

						<li class="select-time">
							<label>创建时间： </label>
							<input type="text" class="time-input" id="cra_startTime" placeholder="开始时间" name="params[craBeginTime]"/>
							<span>-</span>
							<input type="text" class="time-input" id="cra_endTime" placeholder="结束时间" name="params[craEndTime]"/>
						</li>

						<li class="select-time">
							<label>使用时间： </label>
							<input type="text" class="time-input" id="use_startTime" placeholder="开始时间" name="params[useBeginTime]"/>
							<span>-</span>
							<input type="text" class="time-input" id="use_endTime" placeholder="结束时间" name="params[useEndTime]"/>
						</li>

						<li><a class="btn btn-primary btn-rounded btn-sm"
							   onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							<a class="btn btn-warning btn-rounded btn-sm"
							   onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
						</li>
					</ul>
				</div>
			</form>
		</div>

		<div class="btn-group-sm hidden-xs" id="toolbar" role="group">

			<span id="curl-error " style="color: #A94442;font-size: 9pt;" class="help-block m-b-none file-upload-msg"><i class="fa fa-times-circle"></i>  还未选择Excel文件</span>

			<span class="btn btn-success fileinput-button">
				</i><span>选择文件</span>
				<input type="file" name="uploadFile" id="uploadFile" >
			</span>

			<button class="btn btn-primary qrsc" type="button" onclick="importExp()" style="display: none">
				<i class="fa fa-upload"></i>
				&nbsp;&nbsp;<span class="bold">确认上传</span>
			</button>

			<a class="btn btn-success" onclick="$.operate.add()"
			   shiro:hasPermission="system:role:add"> <i class="fa fa-plus"></i>
				新增
			</a>
			<!--<a class="btn btn-primary btn-edit disabled"
					onclick="$.operate.edit()" shiro:hasPermission="system:role:edit">
				<i class="fa fa-edit"></i> 修改
			</a> -->
			<a class="btn btn-danger btn-del disabled"
				onclick="$.operate.removeAll()"
				shiro:hasPermission="system:role:remove"> <i
				class="fa fa-remove"></i> 删除
			</a>
			<a class="btn btn-primary" onclick="addLabels()" > <i class="fa fa-plus"></i> 添加标签</a>

			<a class="btn btn-warning" onclick="exportExp()">
				<i class="fa fa-download"></i> 导出文件
			</a>

		</div>

		<div class="col-sm-12 select-table table-striped">
			<table id="bootstrap-table" data-mobile-responsive="true"></table>
		</div>
	</div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
	var listUrl = "/list";
	var excelName = $('#excelName').val();
	if(excelName != null)
        listUrl = "/list?flag="+excelName

    var prefix = ctx + "phone/";
    var formData = new FormData();
    var name = "" ;

    $(document).ready(function(){
        $("#uploadFile").change(function() {
            var arrs=$(this).val().split('\\');
            var filename=arrs[arrs.length-1]; // 文件名
            var hz = filename.split('.')[1]; // 后缀名


            name = $("#uploadFile").val();
            formData.append("file",$("#uploadFile")[0].files[0]);
            formData.append("name",name);

			$('.file-upload-msg').html(name);
			$(".fileinput-button").hide();
            $('.qrsc').show();
        });
    });


    /**
     * 添加标签
     */
    function addLabels() {
        // 将条件传入（和实体类对应）
        var phone = $('[name = "phone"]').val();
        var flag = $('[name = "flag"]').val();
        var craBeginTime = $('#cra_startTime').val();
        var craEndTime = $('#cra_endTime').val();
        //var useBeginTime = $('#use_startTime').val();
        //var useEndTime = $('#use_endTime').val();

        // 组装条件
		var url = '&phone='+phone+'&flag='+flag;
        url += '&craBeginTime='+craBeginTime+'&craEndTime='+craEndTime;
        //url += '&useBeginTime='+useBeginTime+'&useEndTime='+useEndTime;

        var url = prefix + '/addLabels?1=1'+url;
        $.modal.open("添加标签", url, '800', '400');
    }


    //导入文件
    function importExp() {
        $(".fileinput-button").show();
        $('.qrsc').hide();

        $.modal.loading("正在导入数据，请稍候");

        if(name != ""){
            $.ajax({
                url : prefix +'/importExp',
                type : 'POST',
                async : false,
                data : formData,
                processData : false,
                contentType : false,
                success : function(data) {
                    $.modal.closeLoading();
                    if(data.code == 0 ){
                        $.modal.alertSuccess("导入成功");
                        setTimeout(function(){
                            //使用  setTimeout（）方法设定定时1500毫秒
                            location.reload(true);//页面刷新
                        },1500);
                    }else{
                        $.modal.alertError("导入失败");
                    }
                }
            });
        }else{
            $.modal.alertError("未选择文件");
        }
    }

    /**
	 * 导出文件
     */
    	function exportExp() {
            $.ajax({
                url : prefix +'/exportExp',
                type : 'POST',
                async : false,
                data : {},
                // 告诉jQuery不要去处理发送的数据
                processData : false,
                // 告诉jQuery不要去设置Content-Type请求头
                contentType : false,
                success : function(data) {
                    if(data.code == 0 ){
                        window.location.href = ctx + "common/download?fileName=" + data.msg + "&delete=" + true;
                        $.modal.alertSuccess("导出成功");
                    }else{
                        $.modal.alertError("导出失败");
                    }
                }
            });
    	}

	//var editFlag = [[${@permission.hasPermi('phone::edit')}]];

	var removeFlag = [[${@permission.hasPermi('phone:remove')}]];


    $(function() {
        var options = {
            url: prefix + listUrl,
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            sortName: "createAt", // 排序字段
            modalName: "手机号码",
            search: false,
            showExport: false,
            columns: [{
                checkbox: true
            },
                {
                    field: 'id',
                    visible: false
                },
                {
                    field: 'phone',
                    title: '手机号码',
                },
                {
                    field: 'flag',
                    title: '标签',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        var flags = value.split(',');
						for(var i = 1 ; i<flags.length;i++){ // 第一个是空的
						    if(i == 1)
                                actions.push('<div style="margin-top: 10px;">');
                            actions.push('&nbsp;<span class="label label-primary">'+flags[i]+'</span>&nbsp;');
							if(i == 3 || i % 3 == 0){
                                actions.push('</div>');
                              	actions.push('<div style="margin-top: 10px;">');
							}
						}
                        return actions.join('');
					}
                },
                {
                    field: 'createAt',
                    title: '创建时间',
                    sortable: true
                },
                {
                    field: 'useTime',
                    title: '使用时间',
                    sortable: true
                },
                {
                    title: '操作',
                    field: 'wxId',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        //actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.wxId + '\')"><i class="fa fa-edit"></i> 编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs  ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.wxId + '\')"><i class="fa fa-remove"></i> 删除</a> ');
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
    });

</script>
</body>
</html>